<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<head>
  <title>
    {% if market %}{{lang.global.title.dailyshop}}{% elif night %}{{lang.global.title.nightmarket}}{% else
    %}{{lang.global.title.shopdefault}}{% endif %} | Valora | GamerNoTitle
  </title>
  <script>
    if (document.location.pathname != "/market" && document.location.pathname != "/market/night") {
      window.location = document.location.origin + "/market"
    }
  </script>
  {% include 'public/head.html' %}
</head>

<body class="index-page">
  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  {% include 'public/components/market/buttons.html' %}

  <div class="container">
    <div class="row text-center py-2 mt-3">
      <div class="col-12 mx-auto">
        <div class="alert alert-pink text-white rounded" role="alert">
          <span class="alert-icon"><i class="ni ni-like-2"></i></span>
          {{lang.market.welcome.opening}} {% if not accesstokenlogin
          %}<strong>{{player.name}}</strong>#<strong>{{player.tag}}</strong><br> {% else %} <strong>N/A</strong><br> {%
          endif %}
          {{lang.market.welcome.credit}} <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP.png" height=16px width=16px>
          <strong>{{player.vp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/RP.png" height=16px width=16px>
          <strong>{{player.rp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/KC.png" height=16px width=16px>
          <strong>{{player.kc}}</strong>
        </div>
      </div>
    </div>
  </div>
  <!-- Mobile Devices -->
  {% if market %}
  <div class="container">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.market.title}}</h1>
    <br>
    <div class="row">
      {% for weapon in weapon_list %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm rounded">
          <div class="gun-image">
            <a href="{{weapon.img|safe}}" data-fancybox="gallery">
              <img height=auto width=100% class="text-center" src={{weapon.img|safe}}>
            </a>
          </div>
          <div class="card-body">
            <h3 class="text-gradient text-primary mb-0 mt-2"><img src={{weapon.tier}} height="28px" width="28px">
              {{weapon.name|safe}}</h3>
            <h3 class="text-gradient text-dark mb-0 mt-2"><img
                src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP-black.png" width=24px
                height=24px>
              {{weapon.cost|safe}}</h3>
            <br>
            {% for level in weapon.levels %}
            {% if level.displayName != '' %}
            <!-- Button trigger modal -->
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{level.uuid|escape}}">
              {{level.displayName}}: {{level.levelItem}}
            </button>

            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{level.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{level.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    <video id="{{level.streamedVideo}}" width=100% controls>
                      <source src="{{level.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{level.streamedVideo}}" type="video/mp4">
                      {{lang.market.modal.videonotavaliable}}
                    </video>
                    <br>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary" onclick="closeVideo('{{level.streamedVideo}}')"
                      data-bs-dismiss="modal">{{lang.market.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            {% endfor %}
            <br>
            {% for chroma in weapon.chromas %}
            {% if chroma.displayName != '' %}
            <!-- Button trigger modal -->
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{chroma.uuid|escape}}">
              {{chroma.displayName}}
            </button>

            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{chroma.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{chroma.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    {% if chroma.streamedVideo %}
                    <video id="{{chroma.streamedVideo}}" width=100% controls>
                      <source src="{{chroma.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{chroma.streamedVideo}}" type="video/mp4">
                      {{lang.market.modal.videonotavaliable}}
                    </video>
                    <br>
                    {% else %}
                    <img width="100%" src="{{chroma.fullRender}}"> {% endif %}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary" onclick="closeVideo('{{chroma.streamedVideo}}')"
                      data-bs-dismiss="modal">{{lang.market.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            </script>
            {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  {% endif %}

  {% if night %}
  {% if nightmarket_notavaliable %}
  <div class="container">
    <div class="row text-center py-2 mt-3">
      <div class="col-12 mx-auto">
        <div class="alert alert-danger text-white rounded role=" alert">
          {{lang.nightmarket.notavaliable}}
        </div>
        <br>
        <a href="https://status.riotgames.com/valorant"> <button type="button" class="btn bg-gradient-danger"
            data-bs-dismiss="modal">VALORANT Services Status</button>
        </a>
      </div>
    </div>
  </div>
  {% else %}

  <div class="container">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.nightmarket.title}}</h1>
    <br>
    <div class="row">
      {% for weapon in weapon_list %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm rounded">
          <div class="gun-image">
            <a href="{{weapon.img|safe}}" data-fancybox="gallery">
              <img height=auto width=100% class="text-center" src={{weapon.img|safe}}>
            </a>
          </div>
          <div class="card-body">
            <h3 class="text-gradient text-primary mb-0 mt-2"><img src={{weapon.tier}} height="28px" width="28px">
              {{weapon.name|safe}}</h3>
            <h3 class="text-gradient text-dark mb-0 mt-2"><img
                src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP-black.png" width=24px
                height=24px>
                {{weapon.cost|safe}} → {{weapon.discount|safe}} ({{weapon.per|safe}}% off)</h3>
            <br>
            {% for level in weapon.levels %}
            {% if level.displayName != '' %}
            <!-- Button trigger modal -->
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{level.uuid|escape}}">
              {{level.displayName}}: {{level.levelItem}}
            </button>

            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{level.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{level.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    <video id="{{level.streamedVideo}}" width=100% controls>
                      <source src="{{level.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{level.streamedVideo}}" type="video/mp4">
                      {{lang.nightmarket.modal.videonotavaliable}}
                    </video>
                    <br>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary" onclick="closeVideo('{{level.streamedVideo}}')"
                      data-bs-dismiss="modal">{{lang.nightmarket.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            {% endfor %}
            <br>
            {% for chroma in weapon.chromas %}
            {% if chroma.displayName != '' %}
            <!-- Button trigger modal -->
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{chroma.uuid|escape}}">
              {{chroma.displayName}}
            </button>

            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{chroma.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{chroma.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    {% if chroma.streamedVideo %}
                    <video id="{{chroma.streamedVideo}}" width=100% controls>
                      <source src="{{chroma.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{chroma.streamedVideo}}" type="video/mp4">
                      {{lang.nightmarket.modal.videonotavaliable}}
                    </video>
                    <br>
                    {% else %}
                    <img width="100%" src="{{chroma.fullRender}}"> {% endif %}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary" onclick="closeVideo('{{chroma.streamedVideo}}')"
                      data-bs-dismiss="modal">{{lang.nightmarket.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            </script>
            {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  {% endif %}

  {% include 'public/footer.html' %}
</body>
<script>
    function closeVideo(videoId) {
        var video = document.getElementById(videoId);
        if (video) {
            video.pause();
            video.currentTime = 0;
        } else {
            console.log('No video element found with id: ' + videoId);
        }
    }
</script>